<template>
  <div>
    <button @click="msg = '你好'">修改msg</button>
    我是mybox
    <p id="myP">我是p标签--- {{ msg }}--{{ num }}</p>
  </div>
</template>

<script>
export default {
  beforeCreate () {
    console.log('beforeCreate', this.msg) // undefined
    // this.fn2() // 报错,还无法访问
  },
  created () {
    console.log('created', this.msg) // hello
    this.fn2() // 正常调用

    this.timerId = setInterval(() => {
      this.num++
      console.log('定时器运行了')
    }, 1000)
  },
  beforeMount () {
    console.log('beforeMount', document.querySelector('#myP')) // null
  },

  mounted () {
    console.log('mounted', document.querySelector('#myP')) // 会找到p标签
  },

  beforeUpdate () {
    // 数据改变了，但是界面没更新
    console.log(
      'beforeUpdate',
      this.msg,
      document.querySelector('#myP').innerText
    )
  },
  updated () {
    // 数据改变了，界面也更新了
    console.log('updated', this.msg, document.querySelector('#myP').innerText)
  },

  beforeDestroy () {
    console.log('beforeDestroy')
    // // 关闭定时器
    // clearInterval(this.timerId)
  },
  destroyed () {
    console.log('destroyed')
    // 关闭定时器
    clearInterval(this.timerId)
  },

  data () {
    return {
      msg: 'hello',
      num: 0,
      timerId: null
    }
  },

  methods: {
    // 因为vue对象会在创建的某个阶段
    // 把data和methods里的内容全部挂在到当前实例的最外层
    fn1 () {
      this.msg
      this.fn2()
    },

    fn2 () {
      console.log('fn2被调用')
    }
  }
}
</script>

<style></style>
